import React, { PureComponent }from 'react';
import PropTypes from 'prop-types';
import moment from 'moment';
import { Select, Radio, Form, Input, Upload, Icon, Button, message, Collapse, List } from 'antd';


const FormItem = Form.Item;
const RadioGroup = Radio.Group;
const { TextArea } = Input
const Panel = Collapse.Panel;
const Option = Select.Option;

class WrappedAddFood extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      time: undefined,
    }
  }
  renderTips = (value) => {
    const { onSelectDate } = this.props;
    let date = '';
    if(onSelectDate.length === 0) {
      date = <span>请选择您要报餐的日期！</span>
    } else if (onSelectDate.length === 1) {
      date = <span>{onSelectDate[0]}</span>
    }
    return(
        <FormItem {...value} label="报餐日期">
          {date}
        </FormItem>
    )
  };
  // 发送表单数据
  handleSubmit = (e) => {
    const { onSelectDate } = this.props;
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        if(onSelectDate.length === 0) {
          message.error('请选择您申请的日期！');
          return null;
        }
        message.success('申请已提交！', () => {this.props.history.push('/bookfood/menu');});
      }
    });
  };
  // 表单联动
  handleSelectChange = (value) => {
    this.setState({ time: value });
  };
  // 根据时间段来渲染餐种
  renderFoodCategory = (value) => {
    switch(true) {
      case value === 'breakfast':
        return (
          <Select placeholder="请选择美食">
            <Option value="dj">豆浆/油条</Option>
            <Option value="bz">白粥/油条</Option>
          </Select>
        );
      case value === 'lunch':
        return (
          <Select placeholder="请选择美食">
            <Option value="hmj">黄焖鸡米饭</Option>
            <Option value="tdnr">土豆牛肉咖喱饭</Option>
          </Select>
        );
      case value === 'dinner':
        return (
        <Select placeholder="请选择美食">
            <Option value="qcjz">芹菜炒鸡胗</Option>
            <Option value="bqj">白切鸡</Option>
        </Select>
        );
      default:
        return (
        <Select placeholder="请选择美食">
        </Select>
        )
    }
  }
  render(){
    const { getFieldDecorator } = this.props.form;
    const formItemLayout = {
      labelCol: { span: 4 },
      wrapperCol: { span: 14 },
    };
    return(
      <div>
        <Form onSubmit={this.handleSubmit}>
          {this.renderTips(formItemLayout)}
          <FormItem
            {...formItemLayout}
            label="时段"
            hasFeedback
          >
            {getFieldDecorator('time', {
              rules: [
                { required: true, message: '请选择报餐的时段' },
              ],
            })(
              <Select placeholder="请选择报餐时间段" onChange={this.handleSelectChange}>
                <Option value="breakfast">早餐</Option>
                <Option value="lunch">午餐</Option>
                <Option value="dinner">晚餐</Option>
              </Select>
            )}
          </FormItem>
          <FormItem
            {...formItemLayout}
            label="美食"
            hasFeedback
          >
            {getFieldDecorator('food', {
              rules: [
                { required: true, message: '请选择您报餐的品种' },
              ],
            })(
              this.renderFoodCategory(this.state.time)
            )}
          </FormItem>
          <FormItem
            wrapperCol={{ span: 12, offset: 4 }}
          >
            <Button type="primary" htmlType="submit">点餐</Button>
          </FormItem>
        </Form>
      </div>
    );
  }
}

export const  AddFood = Form.create()(WrappedAddFood);

export class FoodMenu extends PureComponent {
  constructor(props){
    super(props);
    this.state = {
      date1:['早餐： 豆浆/油条', '午餐： 黄焖鸡米饭'],
      date2:['午餐： 黄焖鸡米饭'],
      date3:['早餐： 白粥/油条', '午餐： 土豆牛肉咖喱饭', '晚餐：芹菜炒鸡胗'],
    }
  }
  render(){
    return(
      <div>
        <Collapse bordered={false} accordion>
          <Panel header="2018-09-20" key="1">
            <List
              size="small"
              dataSource={this.state.date1}
              renderItem={item => (<List.Item>{item}</List.Item>)}
            />
          </Panel>
          <Panel header="2018-07-04" key="2">
            <List
              size="small"
              dataSource={this.state.date2}
              renderItem={item => (<List.Item>{item}</List.Item>)}
            />
          </Panel>
          <Panel header="2018-04-05" key="3">
            <List
              size="small"
              dataSource={this.state.date3}
              renderItem={item => (<List.Item>{item}</List.Item>)}
            />
          </Panel>
        </Collapse>
      </div>
    );
  }
}
